<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #ccc;
        }

        .box {
            text-align: center;
        }

        .myCanvas {
            /* border: 1px solid red; */
            background-color: #fff;
            /* box-shadow: 10px 10px 10px 10px; */
        }
    </style>

    <script>
        window.onload = function () {
            let myCanvas = document.querySelector('.myCanvas')
            let context = myCanvas.getContext('2d')
            let img = new Image()
            // 飞机位置
            let x = 250;
            let y = 476;
            // 飞机宽高
            let planeWidth = 100;
            let planeHeight = 124;
            // 飞机移动速度
            let planeMoveSpeed = 5
            img.src = './images/bigplane.png'
            // 数组存储子弹的x轴和y轴的位置
            let bulletArr = []

            // 敌机
            let enemy = new Image()
            enemy.src = './images/fly.png'

            // 敌机数组

            // 初始化飞机
            // img.onload = function () {
            //     //  600*600   100 * 124
            //     context.drawImage(img, x, y);
            // }

            // keypress只支持存在ASCII码的按键,keydown点击任意按键都有
            window.onkeydown = function (e) {
                // 清屏
                context.clearRect(0, 0, 600, 600);
                // console.log(e.keyCode);
                switch (e.keyCode) {
                    case 37: x = x <= 0 ? 0 : x - planeMoveSpeed;
                        break;
                    case 39: x = x>= 600 - planeWidth ? 600 - planeWidth: x + planeMoveSpeed;
                        break;
                    case 38: y = y<=0 ? 0 : y - planeMoveSpeed;
                        break;
                    case 40: y = y>=600-planeHeight ? 600-planeHeight : y + planeMoveSpeed;
                        break;
                    // 按空格，就要往bulletArr中添加一个子弹的位置
                    case 32: bulletArr.push({
                        bx: x + planeWidth / 2 - 5,
                        by: y - 10
                    })
                        break;
                }
                // 重新绘制飞机
                context.drawImage(img, x, y);
            }


            // 定时器，要根据bulletArr绘制子弹的位置
            setInterval(function () {
                // 清屏
                context.clearRect(0, 0, 600, 600);

                // 如果子弹超出屏幕，就将子弹的数组元素信息删掉
                bulletArr = bulletArr.filter(function (item) {
                    return item.by >= -10
                })

                console.log(bulletArr);

                // 根据当前还在屏幕中的bulletArr渲染子弹
                bulletArr.forEach(function (item) {
                    item.by -= 2;
                    context.fillRect(item.bx, item.by, 10, 10);
                })

                // 重新绘制飞机
                context.drawImage(img, x, y);
                context.drawImage(enemy, 0, 0);
            }, 20)

        }
    </script>
</head>

<body>
    <div class="box">
        <canvas class="myCanvas" width="600" height="600"></canvas>
    </div>
</body>

</html>